.label-major {
    font: 16px sans-serif;
}

.label-minor {
    font: 13px sans-serif;
}

.axis line,
.axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    stroke-width: 1.5px;
}

.axis .micro {
    stroke: #aaa;
    stroke-width: 0.5px;
}

.axis .minor {
    stroke: #666;
    stroke-width: 1px;
}

.axis .major {
    stroke-width: 2px;
}

.main {
    font: bold 64px monospace;
    text-anchor: middle;
}

.side {
    font: bold 58px monospace;
    text-anchor: start;
}

.full-button {
    width: 100%;
}

.r {
    fill: #b92c28;
    stroke: #b92c28;
}

.c {
    fill: #eb9316;
    stroke: #eb9316;
}

rect.match {
    fill: rgba(156, 239, 140, 0.51);
    stroke: rgba(156, 239, 140, 0.51);
}

rect.mismatch {
    fill: rgba(255, 14, 0, 0.49);
    stroke: rgba(255, 14, 0, 0.49);
}

rect.carry {
    fill: black;
    stroke: black;
}

path.match {
    stroke: rgba(156, 239, 140, 0.51);
    stroke-width: 2;
    fill: none;
}

path.matcharrow {
    stroke: rgba(156, 239, 140, 0.51);
    stroke-width: 1;
    fill: rgba(156, 239, 140, 0.51);
}

path.mismatch {
    stroke: rgba(255, 14, 0, 0.49);
    stroke-width: 2;
    fill: none;
}

path.mismatcharrow {
    stroke: rgba(255, 14, 0, 0.49);
    stroke-width: 1;
    fill: rgba(255, 14, 0, 0.49);
}

path.carry {
    stroke: rgb(0, 0, 0);
    stroke-width: 2;
    fill: none;
}

path.carryarrow {
    stroke: rgb(0, 0, 0);
    stroke-width: 1;
    fill: rgb(0, 0, 0);
}


.hilight {
    fill: #e6ef86;
    stroke: #e6ef86;
}

.bracket {
    fill: none;
    stroke: black;
    stroke-width: 5px;
}

path.bluebracket {
    fill: none;
    stroke: rgba(17, 123, 255, 0.40);
    stroke-width: 5px;
}